<template>
  <div id="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
      <template #left>
        <div @click="goBack"><van-icon name="arrow-left" size="17"/></div>
      </template>
    </van-search>
    <h3>搜索历史</h3>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search, Icon } from 'vant';

import Toptitle from '../components/common/toptitle/Toptitle.vue';

import "vant/lib/search/style"
import "vant/lib/icon/style"

Vue.use(Search);
Vue.use(Icon);
export default {
  components: { Toptitle },
  name:"Search",
  data() {
    return {
      value:''
    }
  },
  methods: {
    onSearch(val) {
      // Toast(val);
    },
    onCancel() {
      // Toast('取消');
    },
    goBack(){
      this.$emit("getBack")
    }
  },
}
</script>

<style scoped>
  .van-icon-arrow-left{
    padding-right: 10px;
  }
  h3{
    font-size: 14px;
    margin: 14px 0 14px 10px;
  }
</style>